<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>分佣总开关</span>
      </div>
      <div class="text item">
        <el-switch
          v-model="commissionStatus"
          active-color="#13ce66"
          inactive-color="#ff4949"
          @change="handleStatusChange"
        ></el-switch>
      </div>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>分佣层级管理</span>
      </div>
      <div class="text item">
        <el-select v-model="value" clearable placeholder="请选择" @change="handleCommission">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
    </el-card>
    <el-card class="box-card" v-if="showCommissionDetail">
      <div slot="header" class="clearfix">
        <span>分佣比例管理</span>
      </div>
      <div class="text item">
        <el-row class="commission-ratio" v-if="showFirstLevelCommission">
          <el-col :span="3">
            <div class="grid-content bg-purple">一级分佣比例:</div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple-light">
              <el-input placeholder="一级分佣比例" v-model="firstLevelRatio" />
            </div>
          </el-col>
        </el-row>
        <el-row class="commission-ratio" v-if="showSecondLevelCommission">
          <el-col :span="3">
            <div class="grid-content bg-purple">二级分佣比例:</div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple-light">
              <el-input placeholder="二级分佣比例" v-model="secondLevelRatio" />
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <el-row class="commission-ratio-btn">
      <el-button type="primary" @click="saveCommissionConfig">保存</el-button>
    </el-row>
  </div>
</template>

<script>
import {
  get,
  createCommissionConfig,
  updateCommissionConfig
} from "@/api/ums/memberMealCommissionConfig";
export default {
  data() {
    return {
      options: [
        {
          value: "0",
          label: "不分佣"
        },
        {
          value: "1",
          label: "1级分佣"
        },
        {
          value: "2",
          label: "2级分佣"
        }
      ],
      value: "",
      commissionStatus: false,
      showCommissionDetail: false,
      showFirstLevelCommission: false,
      showSecondLevelCommission: false,
      firstLevelRatio: "",
      secondLevelRatio: "",
      listLoading: true,
      commissionConfig: {}
    };
  },
  created() {
    this.get();
  },
  methods: {
    get() {
      this.listLoading = true;
      get().then(response => {
        this.listLoading = false;
        this.commissionConfig = response.data;
        console.log(this.commissionConfig);
        if (this.commissionConfig == null) {
          return;
        }
        if (this.commissionConfig.commissionStatus == 1) {
          this.commissionStatus = true;
        } else {
          this.commissionStatus = false;
        }
        this.value = this.options[this.commissionConfig.commissionLevel].value;
        if (this.commissionConfig.commissionLevel == 1) {
          this.showCommissionDetail = true;
          this.showFirstLevelCommission = true;
          this.firstLevelRatio = this.commissionConfig.firstLevelRatio;
        }
        if (this.commissionConfig.commissionLevel == 2) {
          this.showCommissionDetail = true;
          this.showFirstLevelCommission = true;
          this.showSecondLevelCommission = true;
          this.firstLevelRatio = this.commissionConfig.firstLevelRatio;
          this.secondLevelRatio = this.commissionConfig.secondLevelRatio;
        }
      });
    },
    handleStatusChange(val) {
      console.log(val);
      // if (this.commissionConfig == null) {
      //   return;
      // }
      if (val == true) {
        this.commissionConfig.commissionStatus = 1;
      } else {
        this.commissionConfig.commissionStatus = 0;
      }
    },
    handleCommission(val) {
      console.log(val);
      if (val == 1 || val == 2) {
        this.showCommissionDetail = true;
        if (val == 1) {
          this.showFirstLevelCommission = true;
          this.showSecondLevelCommission = false;
        } else {
          this.showFirstLevelCommission = true;
          this.showSecondLevelCommission = true;
        }
      } else {
        this.showCommissionDetail = false;
      }
    },
    saveCommissionConfig() {
      if (this.commissionConfig == null) {
        var cc = {
          commissionStatus: this.commissionStatus == true ? 1 : 0,
          commissionLevel: this.value,
          firstLevelRatio: this.firstLevelRatio,
          secondLevelRatio: this.secondLevelRatio
        };
        createCommissionConfig(cc).then(response => {
          this.$message({
            message: "添加成功",
            type: "success",
            duration: 1000
          });
        });
      } else {
        var newStatus = this.commissionStatus == true ? 1 : 0;
        this.commissionConfig.commissionStatus = newStatus;
        this.commissionConfig.commissionLevel = this.value;
        this.commissionConfig.firstLevelRatio = this.firstLevelRatio;
        this.commissionConfig.secondLevelRatio = this.secondLevelRatio;
        updateCommissionConfig(
          this.commissionConfig.id,
          this.commissionConfig
        ).then(response => {
          this.$message({
            message: "修改成功",
            type: "success",
            duration: 1000
          });
        });
      }
    }
  },
  components: {}
};
</script>

<style>
.commission-ratio {
  margin-top: 10px;
}
.grid-content {
  height: 40px;
  line-height: 40px;
}
.commission-ratio-btn {
  margin-top: 10px;
}
</style>
